<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="24">
            <a-form-item label="渠道">
              <a-cascader
                :options="options"
                expandTrigger="hover"
                @change="onChange"
                :defaultValue="['weixinMiniProgram', 'main']"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-input-search
      placeholder="input send url"
      v-model="url"
      @search="onSearch"
      enterButton="Send"
      size="large" />

    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="小程序访问地址" key="1">
        <textarea style="width:100%;font-size: 14px;font-weight:500" :rows="10" v-model="wxurl" readonly>
        </textarea>
      </a-tab-pane>
    </a-tabs>

    <span>注：本工具仅生成小程序入口，强制修改【utm_source】与【utm_campaign】</span>
  </a-card>
</template>

<script>

  export default {
    name: "WeiXinMiniProgram",
    components: {
    },
    data () {
      return {
        description: '微信小程序',
        model: {},
        source:'weixinMiniProgram',
        campaign:'main',
        url:'',
        wxurl:'',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 9 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
		    url: {
        },

        options: [
          {
            value: 'weixinMiniProgram',
            label: '微信小程序',
            children: [
              {
                value: 'main',
                label: '微信通用',
              },
              {
                value: 'live',
                label: '微信直播',
              },
            ],
          },
          {
            value: 'toutiaoMiniProgram',
            label: '头条小程序',
            children: [
              {
                value: 'main',
                label: '头条通用',
              },
              {
                value: 'live',
                label: '头条直播',
              },
            ],
          },
        ],



       }
    },
    created () {
      this.loadData();
    },
    computed: {

    },
    methods: {
      onChange(value) {
        console.log(value);
        this.source = value[0];
        this.campaign = value[1];
      },
      loadData() {
        console.log('aaaaaaaaaaa')
        this.url = '';
        this.wxurl = '';
      },

      onSearch (value) {

        if (this.source === '' || this.source === undefined || this.campaign === '' || this.campaign === undefined) {
          this.$message.error('请选择渠道和类型！');
          this.wxurl = '';
          return;
        }

        if(value !== ''){
          let newUrl = '';
          newUrl = this.changeURLArg(value,'utm_source',this.source);
          newUrl = this.changeURLArg(newUrl,'utm_campaign',this.campaign);

          this.wxurl = 'pages/index/index?url=' + encodeURIComponent(newUrl);
        }
      },
      changeURLArg(url,arg,arg_val){
        let pattern=arg+'=([^&]*)';
        let replaceText=arg+'='+arg_val;
        if(url.match(pattern)){
          let tmp='/('+ arg+'=)([^&]*)/gi';
          tmp=url.replace(eval(tmp),replaceText);
          return tmp;
        }else{
          if(url.match('[\?]')){
            return url+'&'+replaceText;
          }else{
            return url+'?'+replaceText;
          }
        }
      },
      handleOk () {
        if(this.url !== ''){
          let newUrl = this.url + '?utm_source=weixinMiniProgram&utm_campaign=main';
          this.wxurl = 'pages/index/index?url=' + encodeURIComponent(newUrl);
        }

      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>